const nameEle = document.querySelector('.username');
const pwd1Ele = document.querySelector('.pwd1');
const pwd2Ele = document.querySelector('.pwd2');
const nameContainerEle = document.querySelector('.name-container');
const pwd1ContainerEle = document.querySelector('.pwd1-container');
const pwd2ContainerEle = document.querySelector('.pwd2-container');

const sexEle = document.querySelector('.sex');
const ageEle = document.querySelector('.age');
const btnEle = document.querySelector('.btn');

var nameFlag = false;
var ageFlag = false;
var pwd1Flag = false;
var pwd2Flag = false;

nameEle.onblur = ()=>{
    const val = nameEle.value;
    if(val){
        const reg = /^[a-zA-Z0-9]{4,16}$/;
        if(reg.test(val)){
            // * 请求重名检测
            $.ajax({
                type:'get',
                url:'http://localhost:3000/checkNameDup',
                data:{
                    name : val
                },
                success : (data)=>{
                    let warningEle = document.querySelector('.warning');
                     if(data.status){
                        if(!warningEle){
                            warningEle = document.createElement('span');
                            warningEle.setAttribute('class','warning')
                            warningEle.innerHTML = '重名!!!';
                            nameContainerEle.appendChild(warningEle)
                        }
                        nameFlag = false
                     }else{
                        if(warningEle){
                            warningEle.remove();
                        }
                        nameFlag = true
                    }
                    btnEle.disabled = !(nameFlag&&ageFlag&&pwd1Flag&&pwd2Ele)
                }
            })
        }else{
            alert('用户名不规范')
            nameFlag = false
            btnEle.disabled = !(nameFlag&&ageFlag&&pwd1Flag&&pwd2Ele)
        }
    }
}

pwd1Ele.onblur = ()=>{
    const val = pwd1Ele.value;
    if(val){
        var reg = /^([a-zA-Z0-9_]){8,15}$/;
        if(reg.test(val)){
            pwd1Flag = true
        }else{
            pwd1Flag = false;
            alert('第一个密码不规范')
        }
        btnEle.disabled = !(nameFlag&&ageFlag&&pwd1Ele&&pwd2Ele)
    }else{
        alert('第一个密码不能为空')
        pwd1Flag = false
        btnEle.disabled = !(nameFlag&&ageFlag&&pwd1Ele&&pwd2Ele)
    }
}


pwd2Ele.onblur = ()=>{
    const val = pwd2Ele.value;
    let val1 = pwd1Ele.value;
    if(val){
            if(val === val1){
                pwd2Flag = true
            }else{
                pwd2Flag = false
                alert('密码不一致！')
            }
        btnEle.disabled = !(nameFlag&&ageFlag&&pwd1Ele&&pwd2Ele)
    }else{
        alert('第二个密码不能为空')
        pwd2Flag = false
        btnEle.disabled = !(nameFlag&&ageFlag&&pwd1Ele&&pwd2Ele)
    }
}

ageEle.onblur = ()=>{
    const val = ageEle.value;
    if(val){
        if(val>0&&val<=120){
            ageFlag = true
        }else{
            ageFlag = false
            alert('你在开玩笑？？？')
        }
        btnEle.disabled = !(nameFlag&&ageFlag&&pwd1Flag&&pwd2Ele)
    }else{
        ageFlag = false
        alert('你多大？？?')
        btnEle.disabled = !(nameFlag&&ageFlag&&pwd1Flag&&pwd2Ele)
    }
}


btnEle.onclick = ()=>{
    $.ajax({
        type:'get',
        url:'http://localhost:3000/userLogin',
        data:{
            name : nameEle.value,
            sex : sexEle.value,
            age : ageEle.value
        },
        success: (data)=>{
            if(data.status){
                // * 跳转到main页面
                location.href = `http://localhost:3000/userInfo?name=${nameEle.value}&sex=${sexEle.value}&age=${ageEle.value}`
            }else{
                alert(data.message);
            }
        }
    })
}



